<template>
  <view class="content" :style="{'padding-top':statusBarHeight + 'px'}">

    <view class="notice-wrap" style="padding: 30px 0 10px 0;">
      <u-notice-bar :text="text1" linkType="switchTab" url="/pages/message/message"></u-notice-bar>
    </view>
    <view class="text-area">
      <image class="logo" src="/static/logo.png"></image>
      <view>
        <text class="title">包装管理系统</text>
      </view>
    </view>

    <view class="introduce">
      <u--text mode="link" :text="text2" :block="false" href="http://www.izhaorui.cn/doc/app/changelog.html"></u--text>
    </view>

    <view class="fun-wrap">
      <text class="p">1、支持动态权限控制</text>
      <text class="p">2、移动端代码支持自动生成所有代码，快速实现开发</text>
      <text class="p">3、移动端同样支持字典显示、图片预览上传等功能</text>
    </view>
    <view class="charts-box">
      <qiun-data-charts type="line" :chartData="chartData" />
    </view>
  </view>
</template>

<script>
  import {
    queryLogininLogStati
  } from '@/api/monitor/logininfo.js'
  export default {
    data() {
      return {
        text1: '欢迎使用ZRAdmin移动版!',
        version: '',
        text2: '',
        chartData: {},
      }
    },
    computed: {
      statusBarHeight() {
        return uni.getSystemInfoSync().statusBarHeight
      },
    },
    onLoad: function() {
      this.version = uni.getSystemInfoSync().appVersion
      this.text2 = '当前版本：v' + this.version
      this.text1 = this.text1

      this.getServerData();
    },
    methods: {
      getServerData() {
        //模拟从服务器获取数据时的延时
        setTimeout(() => {
          let res = {
            categories: ["2018", "2019", "2020", "2021", "2022", "2023"],
            series: [{
              name: "访问量",
              data: [180, 270, 218, 248, 1600, 2800]
            }]
          };
          this.chartData = JSON.parse(JSON.stringify(res));
        }, 500);
        // queryLogininLogStati().then((res => {
        //   const {
        //     code,
        //     data
        //   } = res
        //   let chatList = {
        //     categories: data.categories,
        //     series: [{
        //       name: "访问量",
        //       data: data.numList
        //     }]
        //   };
        //   this.chartData = JSON.parse(JSON.stringify(chatList));
        // }))
      },
    }
  }
</script>

<style lang="scss">
  .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .logo {
    height: 100rpx;
    width: 100rpx;
    margin-right: 20rpx;
  }

  .text-area {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 120rpx 0 0;
  }

  .title {
    font-size: 36rpx;
    color: #8f8f94;
  }

  .introduce {
    color: #8f8f94;
    margin: 50rpx 100rpx 40rpx 100rpx;
  }

  .fun-wrap {
    margin: 10px;
    background: #fff;
    padding: 10px;
    border-radius: 5px;

    .p {
      display: block;
      margin: 10rpx;
      color: skyblue;
    }
  }

  .notice-wrap {
    width: 100%;
    overflow: hidden;
  }
</style>